<template>
    <a-modal
            :title="tableTitle"
            :visible="visible"
            width="1200px"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="form">
            <slot name="examine" v-bind="form">

            </slot>
            <a-descriptions bordered :column="column">
                <a-descriptions-item :label="item.title" :key="index" v-for="(item,index) in formData"
                                     :span="item.span || 1">
                    <a-form-model-item
                            :prop="item.dataIndex"
                            :key="index"
                            :rules="getRules(item)">
                        <a-input
                                :maxLength="100"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='input'"
                                :placeholder="'请输入'+item.title"
                                v-model="form[item.dataIndex]">
                        </a-input>

                        <xlPassword
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='input.password'"
                                :placeholder="'请输入'+item.title"
                                v-model="form[item.dataIndex]">
                        </xlPassword>

                        <a-input-number
                                :min="0"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='input.number'"
                                :placeholder="'请输入'+item.title"
                                v-model="form[item.dataIndex]">
                        </a-input-number>

                        <a-input-number
                                :min="0"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='input.money'"
                                :placeholder="'请输入'+item.title"
                                v-model="form[item.dataIndex]">
                        </a-input-number>

                        <a-textarea
                                :maxLength="100"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='textarea'"
                                :placeholder="'请输入'+item.title"
                                v-model="form[item.dataIndex]">
                        </a-textarea>

                        <xlSelect
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='select'"
                                v-model="form[item.dataIndex]"
                                :placeholder="'请输入'+item.title"
                                @change="(e)=>{
                                    if(item.conditionF && e == item.conditionF.clearValue){
                                        form[item.conditionF.clearKey] = ''
                                    }
                                }"
                                :type-data="item.typeData"
                                showSearch
                                allowClear>
                        </xlSelect>

                        <a-select
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='select.multiple'"
                                v-model="form[item.dataIndex]"
                                :placeholder="'请选择'+item.title"
                                @change="(e)=>{
                                    if(item.conditionF && e == item.conditionF.clearValue){
                                        form[item.conditionF.clearKey] = ''
                                    }
                                }"
                                :maxTagCount="2"
                                showSearch
                                allowClear
                                mode="multiple"
                                :token-separators="[',']">
                            <a-select-option :value="item2.dataValue || item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                {{item2.dataName || item2.codeMasterName}}
                            </a-select-option>
                        </a-select>

                        <xlDate
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-if="item.type=='date'"
                                :placeholder="item.title"
                                :dataType="item.typeData || 'date'"
                                v-model="form[item.dataIndex]">
                        </xlDate>

                        <div class="xl-dateRange" v-if="item.type=='dateRange'">
                            <xlDate class="xl-dateRange-start"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    :dataType="item.typeData.type || 'date'"
                                    :disabled-date="(e)=>{
                                       return disabledStartDate(e,form[item.typeData.endDate])
                                    }"
                                    placeholder="开始日期"
                                    v-model="form[item.typeData.startDate]">
                            </xlDate>
                            <xlDate class="xl-dateRange-end"
                                    :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                    :dataType="item.typeData.type || 'date'"
                                    :disabled-date="(e)=>{
                                       return  disabledEndDate(e,form[item.typeData.startDate])
                                    }"
                                    placeholder="结束日期"
                                    v-model="form[item.typeData.endDate]">
                            </xlDate>
                        </div>

                        <xlImages
                                v-if="item.type=='upload'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]"
                                name="file"
                                accept=".jpg, .jpeg, .png"
                                :max="1"
                        >
                        </xlImages>
                        <xluploadFile
                                v-if="item.type=='upload.file'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]"
                                :title-visible="item.fileTitle?item.fileTitle.titleVisible: false"
                                :title="item.fileTitle?item.fileTitle.title:''"
                                :specifications="item.specifications"
                        >

                        </xluploadFile>
                        <ueditor
                                v-if="item.type=='editor'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]"
                        >
                        </ueditor>
                        <xlNameFile
                                v-if="item.type=='upload.name'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]"
                                :file-path="item.typeData.filePath"
                                :file-name="item.typeData.fileName"
                                :placeholder="item.title"
                        >
                        </xlNameFile>


                        <assignSelect
                                v-if="item.type=='assignSelect'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]"
                                :select-name="item.typeData.selectName"
                                :select-value="item.typeData.selectValue"
                                :url="item.typeData.url"
                                :params="item.typeData.params"
                                :filters="item.typeData.filters"
                                :formType="type"
                                @assignForm="assignForm"
                                :placeholder="item.title"
                                :paramsPath="item.typeData.paramsPath"
                                :edit-type="item.typeData.editType"
                                ref="assignSelect"
                        >

                        </assignSelect>
                        <a-radio-group
                                v-if="item.type=='radio'"
                                @change="(e,v)=>{
                                    if(item.conditionF && e.target.value == item.conditionF.clearValue){
                                        form[item.conditionF.clearKey] = ''
                                    }
                                }"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                v-model="form[item.dataIndex]">
                            <a-radio
                                    :value="item2.dataValue == false? item2.dataValue: item2.dataValue|| item2.codeMasterValue"
                                    :key="index2"
                                    v-for="(item2,index2) in (typeof item.typeData == 'string'?$store.getters.dictionary[item.typeData]:item.typeData)">
                                {{item2.dataName || item2.codeMasterName}}
                            </a-radio>
                        </a-radio-group>

                        <xlCascader
                                v-if="item.type=='cascader'"
                                :disabled="item.disabled || !(item.condition?form[item.condition.conditionKey] == item.condition.conditionValue:true)"
                                :options="item.typeData"
                                :placeholder="'请选择' + item.title"
                                v-model="form[item.dataIndex]"
                                allowClear
                        />
                    </a-form-model-item>
                </a-descriptions-item>
            </a-descriptions>
        </a-form-model>
    </a-modal>
</template>

<script>
    import xlDate from '../formUntil/xlDate'
    import xlPassword from '../formUntil/xlPassword'
    import xluploadFile from '../formUntil/xluploadFile'
    import xlImages from '../formUntil/xlImages'
    import xlNameFile from '../formUntil/xlNameFile'
    import assignSelect from '../formUntil/assignSelect'
    import xlCascader from '../formUntil/xlCascader'
    import ueditor from '../ueditor'
    import moment from 'moment'
    import xlSelect from '../formUntil/xlSelect'

    export default {
        name: "xlForm",
        data() {
            return {
                tableTitle: '标题',
                visible: false,
                confirmLoading: false,
                form: {},
                formData: [],
                type: 1,
                rules: {}
            }
        },
        props: {
            column: {
                type: Number,
                default: 2
            }
        },
        components: {
            xlDate,
            xlImages,
            xlPassword,
            xluploadFile,
            xlNameFile,
            assignSelect,
            xlCascader,
            ueditor,
            xlSelect
        },
        methods: {
            getRules(item) {
                if(item.rules){
                    return [
                        {
                            required: this.getRequird(item.required),
                            message: '请输入' + item.title,
                            trigger: 'change',
                        },
                        ...this.setRules(item.rules)
                    ]
                }
                return {
                    required: this.getRequird(item.required),
                    message: '请输入' + item.title,
                    trigger: 'change',
                }
            },
            assignForm(form) {
                this.form = Object.assign({}, form)
            },
            handleOk() {
                this.$refs.form.validate(async (valid, value) => {
                    console.log(valid, value)
                    if (valid) {
                        this.confirmLoading = true
                        await this.$emit('handleOk', this.form)
                        if (this.$refs.assignSelect) {
                            this.$refs.assignSelect.map(item => {
                                item.selectModel = ''
                            })
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCancel() {
                this.visible = false
            },
            formatData(columns) {
                this.formData = []
                columns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && !item.formVisible) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
                console.log(this.formData)
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && !item.formVisible) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            formatForm(form) {
                delete form.createDateTime
                delete form.modifyDateTime
                delete form.modifyBy
                delete form.createBy
                //整理字段数据 ／ 赋值 清空等
                this.$nextTick(_ => {
                    this.$refs.form.resetFields();
                    this.form = {}
                    this.form = Object.assign({}, form)
                })
            },
            getRequird(value) {
                let data = value
                if (data == undefined) {
                    return true
                } else {
                    return data
                }
            },
            disabledStartDate(startValue, form) {
                const endValue = new Date(form).getTime();
                if (!startValue || !endValue) {
                    return false;
                }
                console.log(startValue.valueOf() > endValue.valueOf())
                return startValue.valueOf() > endValue.valueOf();
            },
            disabledEndDate(endValue, form) {
                const startValue = new Date(form).getTime();
                if (!endValue || !startValue) {
                    return false;
                }
                return startValue.valueOf() >= endValue.valueOf();
            },
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    /deep/ .ant-input-number {
        width: 100%;
    }

    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .xl-dateRange-start {
            width: calc(50% - 10px);
        }

        .xl-dateRange-end {
            width: calc(50% - 10px);
        }
    }
</style>
